<template>
  <!-- 根据歌单的长度判断播放器页面是否显示  -->
  <div class="player-box" v-if="songList.length">
    <!-- 大播放器 -->
    <div class="big-screen" v-if="fullScreen">
      <div>
        <button @click="toggleScreen(false)">small</button>
        {{ currSong.name }}
      </div>
      <div>{{ currSong.singer }}</div>
      <!-- 歌曲的cd -->
      <!-- <div :class="paused ? 'cd' : 'cd cd-play'"> -->
      <div :class="paused ? 'cd cd-play cd-pause' : 'cd cd-play'">
        <img :src="currSong.pic" alt="" />
      </div>
      <!-- 歌词 -->
      <Lyric :paused="paused" ref="lyric"></Lyric>
      <!-- 进度条 -->
      <Progress @jump="jump" :currentTime="currentTime"></Progress>
      <!-- 工具区 -->
      <hr />
      <button @click="toggeMode">{{ modes[loopMode] }}</button>
      <button @click="prev">上一曲</button>
      <button @click="play">{{ paused ? "播放" : "暂停" }}</button>
      <button @click="next">下一曲</button>
      <button @click="changeLikes">{{ isLike ? "已喜欢" : "喜欢" }}</button>
      <button @click="jump">jump</button>
      <audio
        @timeupdate="updateTime"
        @canplay="canplay"
        @ended="ended"
        ref="audio"
        :src="currSong.url"
        controls
      ></audio>
    </div>
    <!-- 小播放器 -->
    <div @click="toggleScreen(true)" class="small-screen" v-else>
      小屏播放器
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations, mapGetters } from "vuex";
import Progress from "./components/Progress.vue";
import Lyric from "./components/Lyric/Lyric.vue";
export default {
  components: { Progress, Lyric },
  data() {
    return {
      modes: ["单曲循环", "列表循环", "随机循环"],
      loopMode: 0, // 单曲循环
      paused: true, // 在变量中记录播放状态 和 audio标签的播放状态保持同步
      currentTime: 0,
    };
  },
  computed: {
    ...mapState(["songList", "fullScreen", "currIdx"]),
    ...mapGetters(["currSong", "isLike"]),
  },
  methods: {
    ...mapMutations(["toggleScreen", "changeCurrIdx", "changeLikes"]),
    jump(num) {
      // 根据参数控制歌曲的跳转
      // 子组件调用 自定义事件
      this.$refs.audio.currentTime = num;
      // 控制歌词改变 在父组件组件调用子组件的seek方法
      console.log("控制歌词跳转", this.$refs.lyric);
      this.$refs.lyric.seek(num);
    },
    play() {
      if (!this.$refs.audio) return false;
      console.log("暂停状态", this.$refs.audio.paused);
      if (this.$refs.audio.paused) {
        this.$refs.audio.play();
        this.paused = false;
      } else {
        this.$refs.audio.pause();
        this.paused = true;
      }
    },
    updateTime(e) {
      // console.log("时间更新", e.target.currentTime, e.target.duration);
      this.currentTime = e.target.currentTime;
    },
    // 切换模式
    toggeMode() {
      this.loopMode += 1;
      if (this.loopMode === 3) {
        this.loopMode = 0;
      }
    },
    canplay() {
      console.log("歌曲准备好播放");
      // 歌曲切换加载准备完毕触发canplay
      if (this.paused) {
        this.play();
      }
    },
    ended() {
      // 歌曲自动停止的时候 保存的状态也停掉
      this.paused = true;
      console.log("播放停止");
      //单曲循环 0  列表循环 1  随机循环 2
      const max = this.songList.length;
      const randIdx = parseInt(max * Math.random());
      switch (this.loopMode) {
        case 0:
          this.play();
          break;
        case 1:
          this.next();
          break;
        case 2:
          this.changeCurrIdx(randIdx);
          break;
      }
    },
    next() {
      this.paused = true;
      let index = this.currIdx + 1;
      if (index >= this.songList.length) {
        index = 0;
      }
      this.changeCurrIdx(index);
    },
    prev() {
      this.paused = true;
      let index = this.currIdx - 1;
      if (index < 0) {
        index = this.songList.length - 1;
      }
      this.changeCurrIdx(index);
    },
    like() {
      // // 喜欢的触发事件
      // let arr = JSON.parse(localStorage.getItem("likes")) || [];
      // arr.push(this.currSong);
      // localStorage.setItem("likes", JSON.stringify(arr));
    },
  },
  mounted() {
    // setTimeout(() => {
    //   console.log(this.$refs.audio.__proto__);
    // }, 3000);
    // duration 歌曲总时长
    // currentTime 当前播放位置的时间 赋值可以直接实现跳转
    // oncanplay 歌曲可以播放触发的监听
    // played paused 歌曲播放暂停的状态值
    // play() pause() 播放歌曲与暂停歌曲
    // ontimeupdate 事件发生改变触发的监听
  },
};
/*
1. 播放器组件一直存在，在不同的组件控制显示隐藏 v
   歌单有数据,现在是要播放 v
2. 可以进行大小的切换 v
3. 显示 
   歌曲名称 v
   作者  v
   专辑的图片 v
4.cd图片随着播放运动
  歌词随着播放运动
  进度条运动
5. 播放 暂停
   前一曲 下一曲
   列表循环 
   单曲循环...
   喜欢
   进度条拖动 控制歌曲播放
 6. 进度条
 7. 歌词
## audio 标签属性

## 喜欢功能
  1. 点击喜欢按钮将当前歌曲的数据存入storage
     * 判断歌曲是否存在 存在 从数据里删除
     * 判断歌曲是否存在 不存在 直接添加
  2.一个getters 表示当前这首歌的喜欢状态

*/
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.player-box {
  font-size: 22px;
  .big-screen {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: green;
    z-index: 3;
    // cd
    .cd {
      .w(300);
      .h(300);
      img {
        width: 100%;
        height: 100%;
      }
      border-radius: 50%;
      overflow: hidden;
      border: 8px solid #ccc;
    }
  }
  .small-screen {
    position: fixed;
    .h(88);
    bottom: 0;
    left: 0;
    right: 0;
    background: green;
    z-index: 3;
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.cd-play {
  animation: rotate 10s infinite linear;
}
.cd-pause {
  animation-play-state: paused;
}
</style>
